<template>
	<view class="contain" v-if="isOpen">
		<view class="videoPlay">
			<video ref="myVideo" id="myVideo" :src="videoPlayUrl" controls :style="'Width:'+winWidth+'px'" @pause="pause" @play="play" @error="error"></video>
		</view>
		<view class="coursesDesc">
			<u-tabs :list="title.data" @click="titleClick" :scrollable="false"
			lineWidth="38"
			lineColor="#F63558"
			lineHeight="3"
			:activeStyle="{'color':'#F63558','fontSize':'32rpx','fontWeight':'600'}" 
			:inactiveStyle="{'color':'#ccc','fontSize':'32rpx','fontWeight':'600'}"
			:itemStyle="{'width':'108rpx','height':'100rpx'}"></u-tabs>
		</view>
		<view class="rounded dataBody" v-if="itemIndex===0">
			 <view class="grid grid-flow-row-dense grid-cols-3 grid-rows-1 flex items-start">
			   <view class="flex flex-col col-span-2 pl-3 mb-3" style="border-bottom:1px solid #ededed; padding-bottom:8px;">
				   <text class="flex justify-start big blod mb-2">{{ courses.data.coursename }}</text>
				   <text class="text-sm gray">{{courses.data.coursepeople}}人/{{courses.data.courselev}} | {{courses.data.totalcourses}}节课时 | {{courses.data.coursetime}}分钟</text>
				   <text class="text-sm gray">{{courses.data.weekname}} {{courses.data.classtime}}</text>
			   </view>
			   <view class="flex justify-center flex-col">
				   <text class="flex justify-center text-green-500 blod text-sm">播放试看</text>
				   <text class="flex justify-center text-red-500 mt-2">￥{{courses.data.courseprice}}</text>
				   <view class="flex justify-center mt-2 items-end small gray" :style="'color:'+color+' !important;'" @click="addFav">
					   <u-icon :name="name" :color="color" size="24"></u-icon>收藏
				   </view>
			   </view>
			 </view>
			 
			 <view class="my-5 grid grid-flow-row-dense grid-cols-3 grid-rows-1 flex items-start courseList" 
			 v-for="(item,index) in courses.data.videoLists" :key="item" @click="PlayCourse(index)">
					<view class="col-span-2 pl-3" :class="playIndex===index?'blod':''">
						{{ courses.data.coursename }}--第{{index+1}}节课
					</view>
					<view class="flex justify-center flex-col">
						<view class="w-full flex justify-center">
							<u-loading-icon v-if="playIndex===index" color="#3C9CFF" :text="text"></u-loading-icon>
							<u-icon v-else name="play-circle-fill" color="#999" size="24"></u-icon>
						</view>
					</view>
			 </view>
			 
		</view>
		<view class="rounded dataBody" v-if="itemIndex===1">
			 <view class="flex items-center flex-col p-3">
				<text class="leading-relaxed flex justify-start w-[100%] mb-2">
					{{ courses.data.courseins }}
				</text>
				<!-- 课程图片集 -->
				<view class="imglist">
					<view style="margin:10rpx auto;" v-if="courses.data.coursephotosList!=null" v-for="item in coursesimgs.data">
						<image :src="item" mode="widthFix" @click="preView(item)"></image>
					</view>
				</view>
			 </view>
		</view>
		
		
		
	</view>
	<view v-else>
		<view style="margin-top:60rpx;"><u-empty mode="data" text="版本尚未开放-"></u-empty></view>
	</view>
	
</template>

<script setup lang='ts'>
import { ref,reactive } from 'vue'
import { onLoad,onShow } from '@dcloudio/uni-app'
import { userStore } from '@/stores/userStore'
let { hasLogin,userData } = userStore();

let winWidth=ref(uni.$tools.GetScreenWidth());
let winHeight=ref(uni.$tools.GetScreenHeigth());

let myVideo=ref(); //video组件对象引用
//创建播放器实例
myVideo.value = uni.createVideoContext('myVideo',this);	


//是否打开
let isOpen=ref(false);

let favId=ref(-1);
let videoId=ref(-1);
let playIndex=ref(-1);
let videoState=ref("play");
let text=ref("播放中");
let coursesimgs=reactive<any>({data:[]});

let name=ref('star');
let color=ref('#999');
let itemIndex=ref(0);
let title=reactive<any>({data:[
	{name: '课程大纲',}, 
	{name: '课程简介',}]});
const videoPlayUrl=ref(""); //https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4


//读取开关
const getOpenCourse=()=>{
	let paraData={}
	console.log("读取开关参数:",paraData);
	uni.$tools.Reqeust('/api/getOpenCourse',paraData,'POST').then((res:any)=>{
		console.log('读取开关参数:==>',res);
		if (res.data.code == 200) {
			isOpen.value=res.data.data[0].switchtype===1?true:false;
		}
	})	
}

const titleClick=(e:any)=>{
	console.log(e);
	itemIndex.value=e.index;
}	

/* 预览图片 */
const preView=(item:string)=>{
	uni.previewImage({
			urls: coursesimgs.data,
			current:item
	});
}

/* 检查是否已收藏 */
const checkFav=()=>{
	if(hasLogin){
		let paraData={
			userid:userData.userinfo.id,
			courseid:videoId.value
		}
		console.log("检查是否已收藏参数:",paraData);
		uni.$tools.Reqeust('/api/checkFavs',paraData,'POST').then((res:any)=>{
			console.log('检查是否已收藏结果:==>',res);
			if (res.data.code == 200) {
				uni.hideLoading();
				favId.value=res.data.dataid
				name.value="star-fill";
				color.value="#3C9CFF";
			}else{
				uni.hideLoading();
			}
		})		
	}
}


/* 添加收藏结果 */
const addFav=()=>{
	if(!hasLogin){
		uni.$tools.Toast("请登录后操作");
		return;
	}
	if(name.value==='star'){
		let paraData={
			userid:userData.userinfo.id,
			courseid:videoId.value
		}
		console.log("添加收藏参数:",paraData);
		uni.$tools.Reqeust('/api/addFavs',paraData,'POST').then((res:any)=>{
			console.log('添加收藏结果:==>',res);
			if (res.data.code == 200) {
				uni.hideLoading();
				favId.value=res.data.dataid
				name.value="star-fill";
				color.value="#3C9CFF";
				uni.$tools.Toast("已收藏");
			}else{
				uni.hideLoading();
			}
		})
	}else{
		let paraData={
			id:favId.value
		}
		console.log("移除收藏参数:",paraData);
		uni.$tools.Reqeust('/api/removeFavs',paraData,'POST').then((res:any)=>{
			console.log('移除收藏结果:==>',res);
			if (res.data.code == 200) {
				favId.value=-1;
				uni.hideLoading();
				name.value="star";
				color.value="#999";
				uni.$tools.Toast("已从收藏中移除");
			}else{
				uni.hideLoading();
			}
		})
	}
}
onLoad(()=>{
	//console.log(uni.getStorageSync("videoId"), typeof(uni.getStorageSync("videoId2")));
	if(uni.getStorageSync("videoId")!=""){
		videoId.value=uni.getStorageSync("videoId");
		console.log("播放videoId",videoId.value);
		getVideos();
		checkFav();
	}
});

onShow(()=>{
	getOpenCourse();
});


let courses=reactive<any>({
	data:{
		id:'',
		videoLists:[],
		courseins:'',
		courselev:'',
		coursename:'',
		coursetime:'',
		courseprice:0,
		coursepeople:0,
		totalcourses:0,
		coursephotosList:'',
		starttime:'',
		endtime:'',
		weekname:'',
		classtime:'', //上课时间 周六9:00-15:00'
	}
});	


const getCourseName=(cid:string)=>{
	let index=courses.data.findIndex(item=>item.id===cid);
	if(index!=-1){
		return courses.data[index].coursename;
	}else{
		return "课程名称尚未设置";
	}
}
const PlayCourse=(index:number)=>{
	text.value="";
	playIndex.value=index;
	let vUrl=courses.data.videoLists[index].videourl;
	if(vUrl.indexOf("http")!=-1){
		text.value="播放中";
		videoPlayUrl.value=vUrl;
		console.log("开始播放",videoPlayUrl.value);
		myVideo.value.stop();
		setTimeout(()=>{
			myVideo.value.play();
		},1500);
	}else{
		videoPlayUrl.value="";
		myVideo.value.stop();
		setTimeout(()=>{
			text.value="视频已失效";
		},1500);
		console.log("播放失败,未能找到播放地址...");
	}
}
const pause=()=>{
	text.value="暂停";
}
const error=()=>{
	text.value="视频已失效";
}
const play=()=>{
	text.value="播放中";
}
const getVideos=()=>{
	uni.showLoading({
		title:"加载中..."
	})
	let paraData={}
	//console.log("视频参数:",paraData);
	uni.$tools.Reqeust('/api/getCoursesById/'+videoId.value,paraData,'GET').then((res:any)=>{
		console.log('课程视频返回:==>',res);
		if (res.data.code == 200) {
			uni.hideLoading();
			courses.data = res.data.data.courses; //自动析构对象
			console.log("课程名称:",courses.data.coursename);
			courses.data.videoLists=res.data.data.videosList;
			//默认取第一个视频
			if(courses.data.videoLists[0]!=undefined){
				playIndex.value=0;
				text.value="暂停";
				videoPlayUrl.value=courses.data.videoLists[0].videourl;
			}
			//课程图片列表
			//console.log("AAA",courses.data.coursephotosList);
			if(courses.data.coursephotosList!=''){
				coursesimgs.data=[];
				if(courses.data.coursephotosList.indexOf(",")!=-1){
					let Arrs=courses.data.coursephotosList.split(",");
					for(let i=0;i<Arrs.length;i++){
						console.log(Arrs[i]);
						coursesimgs.data.push(Arrs[i]);
					}
				}else{
					coursesimgs.data.push(courses.data.coursephotosList);
				}
			}		
		}else{
			uni.hideLoading();
		}
	})	
}
</script>
<style>
 page{
	 background:#EDEDED;
 }
</style>
<style lang='scss' scoped>
	@import "video.scss";
</style>